@import "../../assets/styles/color-select";
.card-group-item {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  width: 300px;
  height: 450px;
  border-radius: 10px;
  transition: .35s all ease;
  cursor: pointer;

  &:first-child {
    background-color: #27AE60;

    .card-group-item-title {
      background-color: #228743;
    }
  }

  &:not(:first-child) {
    margin-left: 8vw;
  }

  &:nth-child(2) {
    background-color: #fac958;

    .card-group-item-title {
      background-color: #eebd58;
    }
  }

  &:nth-child(3) {
    background-color: #E74c3c;

    .card-group-item-title {
      background-color: #E74c3c;
    }
  }

  &:hover {
    box-shadow: 3px 0 4px 2px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
  }

  &-title {
    width: 100%;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 10px 0 0;
  }

  &-content {
    margin-top: 20px;
    padding: 20px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;

    &-header {
      font-size: 24px;
    }

    &-main {
      padding: 0 10px;
      margin-top: 20px;
      font-size: 15px;
    }

    &-more {
      color: white;
      display: inline-flex;
      align-items: center;
      vertical-align: center;
      position: absolute;
      right: 30px;
      bottom: 30px;
      a{
        text-decoration: none;
        color:white;
      }
    }
  }
}
.rotate, .stroke {
  width: 100px;
}
